<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
const models: any = ref([])
import { getModelList } from '@/api/interface/museum/model'

const getModels = () => {
  getModelList({}).then((res: any) => {
    models.value = res.map((v: any) => {
      return {
        id: v.id,
        url: v.modelImg,
        name: v.modelName,
        modelUrl: v.modelUrl
      }
    })
  })
}
getModels()

const selectModel = (index: any) => {
  models.value.forEach((v: any, i: any) => {
    if (i === index) {
      models.value[i].active = true
    } else {
      models.value[i].active = false
    }
  })
}

const getContentHeight = () => {
  // 75为drawer的title 70为自定义的footer 56为tab标题的高度 65为分页高度
  const clientHeight = document.body.clientHeight
  return clientHeight - 53 - 72 - clientHeight * 0.15 * 2
}
const contentHeight = ref(getContentHeight())

const windowResize = () => {
  contentHeight.value = getContentHeight()
}

onMounted(() => {
  window.addEventListener('resize', windowResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', windowResize)
})

const submitForm = () => {
  const selectedModel = models.value.filter((v: any) => v.active)
  return selectedModel && selectedModel.length ? selectedModel[0] : {}
}

defineExpose({
  submitForm
})
</script>

<template>
  <div class="model-card-wrapper">
    <el-scrollbar class="model-card-scroll" :style="{ height: contentHeight + 'px' }">
      <div :class="{ 'model-card-item': true, active: item.active }" v-for="(item, index) in models" :key="index" @click="selectModel(index)">
        <div class="name">{{ item.name }}</div>
        <img class="url" :src="item.url" />
      </div>
    </el-scrollbar>
  </div>
</template>

<style lang="scss" scoped>
.model-card-wrapper {
  display: flex;
  .model-card-scroll {
    width: 760px;

    :deep(.el-scrollbar__view) {
      display: flex;
      flex-wrap: wrap;
    }
    .model-card-item {
      width: 240px;
      height: 193px;
      margin-right: 20px;
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 20px;
      cursor: pointer;
      border: 1px solid #fff;
      box-sizing: border-box;

      .name {
        height: 37px;
        line-height: 37px;
        font-size: 14px;
        padding-left: 12px;
        box-sizing: border-box;
        background-color: rgba(245, 247, 249, 1);
      }

      .url {
        width: 240px;
        height: 156px;
      }
    }

    .model-card-item:nth-child(3n) {
      margin-right: 0;
    }

    .model-card-item.active {
      border: 1px solid rgba(2, 117, 255, 1);
      .name {
        background-color: rgba(2, 117, 255, 1);
        color: #fff;
      }
    }
  }
}
</style>
